<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>


<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" >
                <!--<div class="layui-card-header">商品管理</div>-->
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">商品列表</li>
                            <li onclick="go('add')">新增商品</li>

                        </ul>
                        <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px">

                            <div class="layui-tab-item layui-show">

                                <div>
                                    <div class="layui-btn-group">
                                        <!--<button class="layui-btn ">推荐</button>-->
                                        <!--<button class="layui-btn " onclick="getCheckBox();">上架</button>-->
                                        <!--<button class="layui-btn " onclick="getCheckBox();">下架</button>-->
                                        <button class="layui-btn" onclick="setStatus(1);" >上架</button>
                                        <button class="layui-btn" onclick="setStatus(0);" >下架</button>
                                        <button class="layui-btn" onclick="del();">删除</button>
                                    </div>
                                </div>

                                <div class="layadmin-trailer ">


                                    <table class="layui-table" lay-skin="line">

                                        <thead>
                                        <tr>
                                            <th style="width:5%"></th>
                                            <th style="width:5%">#ID</th>
                                            <th>图片</th>
                                            <th>名称</th>
                                            <th>价格</th>
                                            <th>分类</th>
                                            <th>品牌</th>
                                            <th>型号</th>
                                            <th>材质</th>
                                            <th>店铺</th>
                                            <th >状态</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(item,index) in items" :data_id="item.id">
                                            <td style="width: 20px;text-align: center">
                                                <input type="checkbox" class="vue_index" name="id" :value="item.id"
                                                       style="zoom: 150%">
                                            </td>
                                            <td>{{item.id}}</td>
                                            <td v-if="item.thumb=='null'"><img src="/res/img/thumb.png" class="layui-circle2" style="width: 100px;height: 80px"></td>
                                            <td v-else><img :src="item.thumb" class="layui-circle2" style="height: 80px;width: auto"></td>
                                            <td>{{item.name}}</td>
                                            <td><span>￥</span>{{item.price}}</td>
                                            <td>{{item.fenlei}}</td>
                                            <td>{{item.pinpai.pinpai}}</td>
                                            <td>{{item.xinghao}}</td>
                                            <td>{{item.caizhi}}</td>
                                            <td>{{item.shangjia.shop_name}}</td>
                                            <td>
                                                <span v-if="item.status==1" class="layui-badge layui-bg-gray">{{item.status2}}</span>
                                                <span v-if="item.status==0" class="layui-badge layui-bg-red">{{item.status2}}</span>
                                            </td>
                                            <td>

                                                <div class="layui-btn-group">
                                                    <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="detalis(this)"
                                                            :data_id="item.id" :data_index="index">详细
                                                    </button>
                                                    <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="edit(this)"
                                                            :data_id="item.id" :data_index="index">编辑
                                                    </button>
                                                </div>

                                            </td>
                                        </tr>

                                        </tbody>
                                    </table>


                                </div>
                                <div id="demo7"></div>

                            </div>


                        </div>
                    </div>


                </div>


            </div>

        </div>


    </div>
</div>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    var app = new Vue({
        el: '#app',
        data: {
            check: [],
            curr: 1,//当前页
            limit: 10,//当前页
            items: []
        }
    });

    function init() {
        layer.ready(function () {
            layer.load(2);
            $.get('/admin/goods/index', {page: app.curr, limit: app.limit},
                function (res) {
                    layer.closeAll();
                    app.items = res.data;
                }
            );
        });

    }

    layui.use('table', function () {
        var table = layui.table;
    });

    //新增商品
    layui.$('#add').on('click', function () {

        layer.load(2);
        location.href = "{:url('add')}";
    });
//编辑  弹框

        function edit(that) {

            var data_id = $(that).attr('data_id');
            layer.open({

                type: 2,
                title: '编辑',
                shadeClose: true,
                shade: 0.01,
                area: ['80%', '80%'],
                content: "{:url('edit')}?id=" + data_id //iframe的url

            });

    }
    //详情 弹框

    function detalis(that) {

        var data_id = $(that).attr('data_id');
        layer.open({

            type: 2,
            title: '详情',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('detalis')}?id=" + data_id //iframe的url

        });

    }
    //获取下标
    function getCheckBox() {
        var check = [];
        $.each($('input[type=checkbox]:checked.vue_index'), function () {
            check.push($(this).val());
        });
        return check;
    }

//删除
    function del(that) {
        var ids = getCheckBox();
        if (ids.length > 0) {
            var index = layer.confirm('确认继续执行？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.post('{:url("del")}', {ids: ids}, function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, {icon: 1})
                        $("input:checkbox").removeAttr("checked");
                        init();
                    }
                    layer.close(index);
                });
            }, function () {
                layer.close(index);
            });
        }


    }
//设置上下架
    function setStatus(status) {

        var ids = getCheckBox();
        if (ids.length > 0) {

            var index = layer.confirm('确认继续执行？', {
                btn: ['确定', '取消'] //按钮
            }, function () {

                $.post('{:url("set_status")}', {ids: ids,status:status}, function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, {icon: 1})
                        $("input:checkbox").removeAttr("checked");
                        init();
                    }
                    layer.close(index);
                });
            }, function () {
                layer.close(index);
            });
        }


    }

    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        //完整功能
        laypage.render({
            elem: 'demo7'
            , count: "{$count}"
            , limits: [10, 20]
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            , jump: function (obj) {
                console.log(obj)
                app.curr = obj.curr;
                app.limit = obj.limit;
                init();

            }
        });

    });


</script>


</body>
</html>




